<template>
  <div class="app-container">
    <div class="manage-header">
      <el-form ref="Form" :inline="true" :model="Form" :rules="Rules">
        <el-form-item prop="turbineId">
          <el-input v-model="Form.turbineId" placeholder="请输入机组编号" :validate-event="false" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-button v-if="isShow1" type="primary" @click="getData">取消查询</el-button>
      </el-form>
    </div>
    <el-table
      stripe
      border
      height="500"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{'text-align': 'center'}"
    >
      <el-table-column
        prop="windFieldName"
        label="所属风场"
        align="center"
      />
      <el-table-column
        prop="turbineId"
        label="机组编号"
        align="center"
      />
      <el-table-column
        prop="turbineStatus"
        label="设备状态"
        align="center"
      />
      <el-table-column
        prop="turbineProduction"
        label="机组发电量"
        align="center"
      />
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        title="机组表单"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <!-- 机组的表单信息 -->
        <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="100px">
          <el-form-item prop="turbineId" label="机组编号" style="width:200px">
            <el-input v-model="form.turbineId" placeholder="请输入机组编号" />
          </el-form-item>
          <el-form-item prop="manufacturer" label="生产厂商" style="width:200px">
            <el-input v-model="form.manufacturer" placeholder="请输入生产厂商" />
          </el-form-item>
          <el-form-item prop="turbineType" label="设备型号" style="width:200px">
            <el-select v-model="form.turbineType" placeholder="请选择设备型号">
              <el-option label="风机" value="风机" />
              <el-option label="电机" value="电机" />
            </el-select>
          </el-form-item>
          <el-form-item prop="installationDate" label="安装日期" style="width:200px">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="请选择日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              style="width:200px"
              :picker-options="pickerOptions0"
            />
            <el-time-picker
              v-model="form.date2"
              placeholder="选择时间"
              format="HH:mm"
              value-format="HH:mm"
              style="width:200px"
            />
          </el-form-item>
          <el-form-item prop="workingYears" label="使用年限" style="width:200px">
            <el-input v-model="form.workingYears" placeholder="请输入使用年限" />
          </el-form-item>
          <el-form-item prop="turbineStatus" label="设备状态" style="width:200px">
            <el-select v-model="form.turbineStatus" placeholder="请选择设备状态" :disabled="nontask">
              <el-option label="正常运转" value="正常运转" />
              <el-option label="出现故障" value="出现故障" />
            </el-select>
          </el-form-item>
          <el-form-item prop="turbineProduction" label="机组发电量" style="width:200px">
            <el-input v-model="form.turbineProduction" placeholder="请输入机组发电量" />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { deleteDevice, getAllDeviceInfo, getTurbineInfo, addDevice, editDevice } from '@/api/de_manage'

export default {
  data() {
    const validateNum = (rule, value, callback) => {
      if (!(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value)) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    return {
      total: 1,
      pageSize: 1,
      isShow1: false,
      dialogVisible: false,
      currentPage: 1,
      nontask: true,
      tableData: [],
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      Form: {
        turbineId: ''
      },
      Rules: {
        turbineId: [
          { required: true, trigger: 'blur', message: '请输入机组编号' }
        ]
      },
      form: {
        windFieldName: '',
        turbineId: '',
        manufacturer: '',
        turbineType: '',
        date1: '',
        date2: '',
        installationDate: '',
        workingYears: '',
        turbineStatus: '',
        turbineProduction: '',
        totalProduction: ''
      },
      rules: {
        turbineId: [
          { required: true, message: '请输入设备编号（数字值）', trigger: 'blur', validator: validateNum }
        ],
        manufacturer: [
          { required: true, message: '请输入生产厂商', trigger: 'blur' }
        ],
        turbineType: [
          { required: true, message: '请选择设备型号', trigger: 'change' }
        ],
        workingYears: [
          { required: true, message: '请填写使用年限（数字值）', trigger: 'blur', validator: validateNum }
        ],
        turbineStatus: [
          { required: true, message: '请选择设备状态', trigger: 'change' }
        ],
        turbineProduction: [
          { required: true, message: '请填写机组发电量（数字值）', trigger: 'blur', validator: validateNum }
        ]
      }
    }
  },
  watch: {
    form: {
      deep: true,
      handler(val) {
        if (this.form.turbineStatus !== '正常运转' && this.form.turbineStatus !== '出现故障') {
          this.nontask = false
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getAllDeviceInfo().then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
        this.isShow1 = false
        this.Form.turbineId = ''
      })
    },
    onSubmit() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          getTurbineInfo(this.Form.turbineId).then(({ data }) => {
            if (data.page.total === 0) {
              this.$message({
                showClose: true,
                message: '没有查询到相应的风电机组信息',
                type: 'error'
              })
            } else {
              this.total = data.page.total
              this.pageSize = data.page.size
              this.tableData = data.page.records
              this.isShow1 = true
            }
          })
        }
      })
    },

    handleEdit(row) {
      this.modalType = 1
      this.dialogVisible = true
      this.$nextTick(function() {
        this.form = Object.assign(this.form, row)
        this.form.date1 = row.installationDate
        this.form.date2 = row.installationDate
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该机组信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDevice(row.turbineId).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 重新获取列表的接口
          this.handleCurrentChange(this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrentChange(pageNum) {
      getAllDeviceInfo(pageNum).then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
      })
    },
    handleClose() {
      // 关闭弹窗
      this.dialogVisible = false
    },
    cancel() {
      this.handleClose()
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 后续对表单的处理
          if (this.modalType === 0) {
            this.form.installationDate = this.form.date1 + ' ' + this.form.date2
            addDevice(this.form).then(({ data }) => {
              // 重新获取列表的接口
              this.getData()
              // 跳转到最后一页查看最新添加的记录
              this.currentPage = data.page.pages
            })
          } else {
            this.form.installationDate = this.form.date1
            editDevice(this.form).then(() => {
              // 重新获取当前页列表的接口
              this.handleCurrentChange(this.currentPage)
            })
          }
          // 关闭弹窗
          this.dialogVisible = false
        }
      })
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 5) { // 表格的第5行做处理
        if (row.turbineStatus === '出现故障') {
          return 'background:red;color:white'
        }
      } else {
        return ''
      }
    }
  }
}
</script>

<style>
.app-container {
  margin: 0 auto;
}
</style>
